<template>
	<view class="container">
		<uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
		<view class="header">
			<view class="search-bar">
				<view class="search">
					<uni-icons type="search" size="16" color="#999" @click="getActivityList"></uni-icons>
					<input type="text" placeholder="搜索活动名称" placeholder-class="placeholder" @input="activityNameInput"
						@confirm="getActivityList" />
				</view>
				<view class="city-selector" @click="showCityPicker">
					<text>{{ currentCity }}</text>
					<uni-icons type="down" size="12" color="#666"></uni-icons>
				</view>
				<uv-picker ref="picker" :columns="addressList" :loading="loading" keyName="cnName" @change="change"
					@confirm="confirm">
				</uv-picker>

			</view>
			<view class="tabs">
				<view class="tab-item" :class="{ active: currentTab === 1 }" @click="selectTab(1)">评分优先</view>
				<view class="tab-item" :class="{ active: currentTab === 2 }" @click="selectTab(2)">距离优先</view>
				<view class="tab-item" :class="{ active: currentTab === 3 }" @click="selectTab(3)">时间优先</view>
			</view>
		</view>
		<scroll-view scroll-y class="content">
			<view class="activity-list">
				<view class="activity-item" v-for="(item, index) in activityList" :key="index"
					@click="openActivityInfo(item.id)">
					<image class="activity-image" :src="item.img!=''?item.img:'/static/2024416111634_79765.png'" mode="aspectFill"></image>
					<view class="activity-info">
						<view class="activity-title">{{ item.title }}</view>
						<view class="activity-score">
							<text class="score">{{ item.recommendScore }}分</text>
							<!-- <text class="participants">({{ item.participants }}人参与)</text> -->
						</view>
						<view class="activity-time">
							<uni-icons type="calendar" size="14" color="#666"></uni-icons>
							<text>{{ item.startTime }}至{{item.endTime}}</text>
						</view>
						<view class="activity-location">
							<uni-icons type="location" size="14" color="#666"></uni-icons>
							<text>{{ item.address }}</text>
						</view>
						<view class="activity-desc">{{ item.highLight }}</view>
						<view class="activity-price">
							<text class="price-label">¥</text>
							<text class="price-value">{{ item.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import uniRequest from '@/components/request.js';
	let picker = ref(null)
	const currentTab = ref(1);
	let currentCity = ref('南京');
	let currentCityCode = "320100";
	let list = ref([])

	let loading = ref(true)
	let provinces = [] //省
	let citys = [] //市
	let pickerValue = [0, 0]
	let defaultValue = [2, 1]
	let addressList = ref([])

	let activityName = ref("")

	// 页面筛选策略
	let distancePriority = 0 // 距离优先
	let scorePriority = 1 // 评分优先
	let timePriority = 0 // 时间优先

	onMounted(() => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/gd/getCityList',
			method: 'POST',
			data: {
				name: ""
			},
			success(res) {
				const records = res.data.data
				provinces = records.sort((left, right) => (Number(left.adCode) > Number(right.adCode) ? 1 :
					-1));
				addressList.value[0] = provinces
				handlePickValueDefault()
				getActivityList()
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	})

	const getActivityList = () => {
		uniRequest({
			url: 'https://suixinyou.top:5066/2c/scenic/activity/getActivityList',
			method: 'POST',
			data: {
				adCode: currentCityCode,
				distancePriority: distancePriority,
				scorePriority: scorePriority,
				timePriority: timePriority,
				name: activityName.value,
				current: 1,
				size: 1000
			},
			success(res) {
				activityList.value = res.data.data.records
				loading.value = false
			},
			fail(err) {
				console.log('请求失败', err);
			},
			complete() {
				console.log('请求完成');
			}
		})
	}

	const showCityPicker = () => {
		picker.value.open()
		handlePickValueDefault()
	};

	const handlePickValueDefault = () => {
		// 设置省
		pickerValue[0] = provinces.findIndex(item => Number(item.id) === defaultValue[0]);
		// 设置市
		citys = provinces[pickerValue[0]]?.children || [];
		addressList.value[1] = citys
		pickerValue[1] = citys.findIndex(item => Number(item.id) === defaultValue[1]);
		// 重置下位置
		picker.value.setIndexs([pickerValue[0], pickerValue[1]], true);
	}
	const change = (e) => {
		if (loading.value) {
			return
		}
		const {
			columnIndex,
			index,
			indexs
		} = e
		// 改变了省
		if (columnIndex === 0) {
			citys = provinces[index]?.children || []
			addressList.value[1] = citys
			picker.value.setIndexs([index, 0], true)
		}
	}

	const confirm = (e) => {
		if (e.value[1] == undefined) {
			const prov = provinces.filter((p) => e.value[0].adCode === p.adCode)
			const city = prov[0].children[0]
			currentCity.value = city.cnName
			currentCityCode = city.adCode
		} else {
			currentCity.value = e.value[1].cnName
			currentCityCode = e.value[1].adCode
		}
		getActivityList()

	}

	const selectTab = (index) => {
		currentTab.value = index
		if (index == 1) {
			scorePriority = 1;
			distancePriority = 0;
			timePriority = 0;
		} else if (index == 2) {
			scorePriority = 0;
			distancePriority = 1;
			timePriority = 0;
		} else if (index == 3) {
			scorePriority = 0;
			distancePriority = 0;
			timePriority = 1;
		}
		getActivityList()
	}

	const activityNameInput = (e) => {
		activityName.value = e.detail.value
	}

	const openActivityInfo = (id) => {
		uni.navigateTo({
			url: "/attractionPages/activity/ActivityInfo?id=" + id
		})
	}
	const activityList = ref([]);
</script>
<style>
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.header {
		flex-shrink: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.search {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		padding: 16rpx 24rpx;
		border-radius: 32rpx;
	}

	.city-selector {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		background-color: #f5f5f5;
		border-radius: 32rpx;
	}

	.city-selector text {
		font-size: 14px;
		color: #333;
		margin-right: 8rpx;
	}

	.search input {
		flex: 1;
		margin-left: 16rpx;
		font-size: 14px;
	}

	.placeholder {
		color: #999;
	}

	.tabs {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.tab-item {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666;
		padding: 8rpx 16rpx;
		border-radius: 24rpx;
		cursor: pointer;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #ff6b6b;
		background-color: #fff3f3;
	}

	.filter-panel {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.filter-section {
		margin-bottom: 30rpx;
	}

	.filter-title {
		font-size: 14px;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.filter-option {
		padding: 12rpx 24rpx;
		background-color: #f5f5f5;
		border-radius: 24rpx;
		font-size: 12px;
		color: #666;
		cursor: pointer;
		transition: all 0.3s;
	}

	.filter-option.active {
		background-color: #ff6b6b;
		color: #fff;
	}

	.filter-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		padding-top: 20rpx;
		border-top: 1px solid #f5f5f5;
	}

	.filter-reset,
	.filter-confirm {
		padding: 12rpx 40rpx;
		border-radius: 24rpx;
		font-size: 14px;
		cursor: pointer;
	}

	.filter-reset {
		background-color: #f5f5f5;
		color: #666;
	}

	.filter-confirm {
		background-color: #ff6b6b;
		color: #fff;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.activity-list {
		padding: 20rpx;
	}

	.activity-item {
		display: flex;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.activity-image {
		width: 240rpx;
		height: 180rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.activity-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.activity-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}

	.activity-score {
		margin-bottom: 12rpx;
	}

	.score {
		color: #ff6b6b;
		font-size: 30rpx;
		font-weight: bold;
	}

	.participants {
		font-size: 28rpx;
		color: #999;
		margin-left: 8rpx;
	}

	.activity-time,
	.activity-location {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.activity-time text,
	.activity-location text {
		margin-left: 8rpx;
	}

	.activity-desc {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.activity-price {
		display: flex;
		align-items: baseline;

	}

	.price-label {
		font-size: 12px;
		color: #ff6b6b;
	}

	.price-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff6b6b;
		margin: 0 4rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 80%;
	}

	.price-unit {
		font-size: 12px;
		color: #999;
	}
</style>